<template>
	<view class="fs" style="{height:height+'px'}">
		<view class="dd" v-for="(item,index) in menus" :key="item.title" @click="enterorder">
			<view class="nimab">
				<image class="image" :src="item.icon" mode="aspectFill"></image>
				<text class="text">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			height:{
				type:Number,
				default:260
			}
		},
		data() {
			return {
				menus: [{
						icon: '../../static/sp.png',
						title: '订单一'
					},
					{
						icon: '../../static/sp.png',
						title: '订单二'
					},
					{
						icon: '../../static/sp.png',
						title: '订单三'
					},
					{
						icon: '../../static/sp.png',
						title: '订单四'
					},
				]
			}
		},
		methods: {
			//获取订单并发送
			enterorder: function(e) {
				this.$emit('enterorder', e);
			}
		}
	}
</script>

<style lang="scss">
	.fs {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
		.dd {
			margin: 20rpx;
			background-color: white;
			border-radius: 20rpx;
			.nimab {
				display: flex;
				
				.image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					margin: 20rpx;
				}
				.text {
					font-size: 25rpx;
					margin: 20rpx;
				}
			}
		}

	}
</style>
